<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3动画</title>
    <style>
        div{
            width:300px;
            height:300px;
            background:red;
            position:relative;
            color:black;<!-- 字体颜色 -->
            animation:myfirst 5s;
            -moz-animation:myfirst 5s infinite;
            -webkit-animation:myfirst 5s infinite;
            -o-animation:myfirst 5s infinite;
        }
        @keyframes myfirst
        {
           from,0%   {background: red; left:300px; top:0px;}
            25%  {background: yellow; left:300px; top:500px;}
            50%  {background: blue; left:800px; top:500px;}
            75%  {background: green; left:800px; top:0px;}
            to,100% {background: purple; left:300px; top:0px;}
        }

        @-webkit-keyframes myfirst /* Safari 和 Chrome */
        {
            from,0%   {background: red; left:300px; top:0px;}
            25%  {background: yellow; left:300px; top:500px;}
            50%  {background: blue; left:800px; top:500px;}
            75%  {background: green; left:800px; top:0px;}
            to,100% {background: purple; left:300px; top:0px;}
        }
        @-moz-keyframes myfirst /* Firefox */
        {
            from,0%   {background: red; left:300px; top:0px;}
            25%  {background: yellow; left:300px; top:500px;}
            50%  {background: blue; left:800px; top:500px;}
            75%  {background: green; left:800px; top:0px;}
            to,100% {background: purple; left:300px; top:0px;}
        }

        @-o-keyframes myfirst /* Opera */
        {
            from,0%   {background: red; left:300px; top:0px;}
            25%  {background: yellow; left:300px; top:500px;}
            50%  {background: blue; left:800px; top:500px;}
            75%  {background: green; left:800px; top:0px;}
            to,100% {background: purple; left:300px; top:0px;}
        }
    </style>
</head>
<body>​
<h3 align="center">矩形边框运动</h3><hr>
<div>移动ing</div>​
</body>
</html>
